<template>
  <div class="vote-list">
    <h2>投票列表</h2>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="进行中的投票" name="active">
        <el-row :gutter="20">
          <el-col :span="8" v-for="vote in activeVotes" :key="vote.id">
            <el-card class="vote-card">
              <h3>{{ vote.title }}</h3>
              <p class="description">{{ vote.description }}</p>
              <div class="vote-info">
                <p>开始时间: {{ formatDate(vote.startTime) }}</p>
                <p>结束时间: {{ formatDate(vote.endTime) }}</p>
              </div>
              <el-button 
                type="primary" 
                @click="$router.push(`/votes/${vote.id}`)"
                :disabled="isVoteEnded(vote.endTime)"
              >
                {{ isVoteEnded(vote.endTime) ? '已结束' : '参与投票' }}
              </el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      
      <el-tab-pane label="即将开始的投票" name="upcoming">
        <el-row :gutter="20">
          <el-col :span="8" v-for="vote in upcomingVotes" :key="vote.id">
            <el-card class="vote-card">
              <h3>{{ vote.title }}</h3>
              <p class="description">{{ vote.description }}</p>
              <div class="vote-info">
                <p>开始时间: {{ formatDate(vote.startTime) }}</p>
                <p>结束时间: {{ formatDate(vote.endTime) }}</p>
              </div>
              <el-button type="info" disabled>即将开始</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="已结束的投票" name="ended">
        <el-row :gutter="20">
          <el-col :span="8" v-for="vote in endedVotes" :key="vote.id">
            <el-card class="vote-card">
              <h3>{{ vote.title }}</h3>
              <p class="description">{{ vote.description }}</p>
              <div class="vote-info">
                <p>开始时间: {{ formatDate(vote.startTime) }}</p>
                <p>结束时间: {{ formatDate(vote.endTime) }}</p>
              </div>
              <el-button type="info" @click="$router.push(`/votes/${vote.id}`)">查看结果</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import dayjs from 'dayjs'

export default {
  name: 'VoteList',
  setup() {
    const store = useStore()
    const activeTab = ref('active')
    const activeVotes = ref([])
    const upcomingVotes = ref([])
    const endedVotes = ref([])

    const fetchVotes = async () => {
      try {
        const now = dayjs()
        const response = await store.dispatch('fetchVotes')
        
        // 分类投票
        activeVotes.value = response.data.filter(vote => 
          dayjs(vote.startTime).isBefore(now) && dayjs(vote.endTime).isAfter(now)
        )
        
        upcomingVotes.value = response.data.filter(vote => 
          dayjs(vote.startTime).isAfter(now)
        )
        
        endedVotes.value = response.data.filter(vote => 
          dayjs(vote.endTime).isBefore(now)
        )
      } catch (error) {
        console.error('Error fetching votes:', error)
      }
    }

    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD HH:mm')
    }

    const isVoteEnded = (endTime) => {
      return dayjs(endTime).isBefore(dayjs())
    }

    const handleTabClick = () => {
      // 可以在这里添加额外的处理逻辑
    }

    onMounted(() => {
      fetchVotes()
    })

    return {
      activeTab,
      activeVotes,
      upcomingVotes,
      endedVotes,
      formatDate,
      isVoteEnded,
      handleTabClick
    }
  }
}
</script>

<style scoped>
.vote-list {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
}

.vote-card {
  margin-bottom: 20px;
}

.vote-card h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.description {
  color: #666;
  margin-bottom: 15px;
}

.vote-info {
  margin: 15px 0;
}

.vote-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.el-button {
  width: 100%;
}
</style>
